* {
  margin:auto;
  padding:0;
  align-items: center;
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
  max-width: 600px;
}
html,body{
  width:100%;
  min-height: 100%;
}
body{
  background-repeat: no-repeat;
  background:#0085fa;  /* fallback for old browsers */
  background:-webkit-linear-gradient(to top, #FFFDE4, #0085fa);  /* Chrome 10-25, Safari 5.1-6 */
  background:linear-gradient(to top, #FFFDE4, #0085fa); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-image: linear-gradient(to bottom, #595959, #6f6f6f, #868686, #9d9d9d, #b5b5b5);
}
.Mainclass{
  padding-top: 10%;
}
.Menü {
  list-style:none  ;
  position: relative;
  margin-left: 2px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0vw;
  width: 50px;
  height: 41px;
  background-color: rgba(255, 255, 255, 0.714);
  /*background:linear-gradient(90deg, rgba(231, 231, 231, 0.08) 0%, rgba(231, 231, 231, 0.08) 14%,rgba(224, 224, 224, 0.08) 14%, rgba(224, 224, 224, 0.08) 51%,rgba(140, 140, 140, 0.08) 51%, rgba(140, 140, 140, 0.08) 100%),linear-gradient(90deg, rgba(244, 244, 244, 0.09) 0%, rgba(244, 244, 244, 0.09) 21%,rgba(158, 158, 158, 0.09) 21%, rgba(158, 158, 158, 0.09) 31%,rgba(162, 162, 162, 0.09) 31%, rgba(162, 162, 162, 0.09) 89%,rgba(115, 115, 115, 0.09) 89%, rgba(115, 115, 115, 0.09) 100%),linear-gradient(90deg, rgb(7, 243, 201),rgb(51, 74, 207));*/
  border-radius: 0px 0px 10px 0px;

}
.login {
  border: 10px;
  margin: 0px;
  padding-top:-10px;
  margin-top: 0px;
  border-radius:  10px 10px 10px 10px;
}
.MenuButton{
display: block;
font-family: arial;
color: #222;
font-size: 20px;
padding: 10px;
padding-top: 5px;
text-decoration: none;


}
.Dropdown{
max-width:480px;
width: 85vw;
  margin-top: -41px;
  padding-top: 10px;
  margin-left:50px;
  margin-right:50px;
  width: 75vw;
  height: 430px;
align-items: center;
display: none;
/*margin-left: 15%;*/
position:relative;
background-color: rgba(255, 255, 255, 0.814);
border-radius:  0px 0px 10px 10px;
z-index: 99999;
}
.Menü:hover ul{
display:block;
}
.Navbar{
z-index:1000;
position:fixed;
top: 0px;
  height: 100%;
}


.wrapper{

margin: 0 auto;
margin-top: 0px;
width: 100%;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */

}

.fotbtn {
  padding: 0px;
  margin: 1px;
  width:70vw ;
  max-width: 450px;
  height: 40px;
  font-size: 16px;
  border-radius: 2px;
  border: 1px solid rgb(0, 0, 0);

}
button{
  margin: 4px;
 width: 180px ;
 height:30px  ;
 border-radius: 5px ;
 border: 0.5px solid rgba(2, 23, 70, 0.658);
 font-size: 18px;
}
button:hover{
  background-color: white;
}
form{display: inline-block;}

#DIVHeader{
  margin: 0px;
  height: 100%;
}

.da{
  color: black;
}

.BottomReg{
  position:fixed;
    bottom: 40px;
  width: 100%;
  

}



.signuperror1{
  margin-bottom: 2px;
}
.signuperror2{
  margin-top: 2px;
}


.Anzeigen{
margin-left:10%;
margin-right:10%;
max-width: 400px;
}

.AuswahlMonatJahr{
  float: left;
  height: 30px;
  width: 37vw;
  margin-right: 5px;
  margin-left: 5px;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
  /*align-content: center; 
  padding-left: 15%;*/
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  padding-top: 2%;
 
  background: #eee;
  box-sizing: border-box;
}


#Anzeigebutton{
  float: none;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0px;
 width: 100% ;
 height:30px  ;
 border-radius: 5px ;
 border: 0.5px solid rgb(0, 0, 0);
 font-size: 15px;
}
#Krankmeldung{
  margin: 10px;
 width: 100% ;
 height:30px  ;
 border-radius: 5px ;
 border: 0.5px solid rgb(0, 0, 0);
 font-size: 15px;
}
#Urlaubsantrag{
  margin: 10px;
 width: 100% ;
 height:30px  ;
 border-radius: 5px ;
 border: 0.5px solid rgb(0, 0, 0);
 font-size: 15px;
}


.Startpage {
  display: grid;
}
.login-status {
  font-size: 20px;
}


.Inputtxt {

  margin: 5px;
  font-size: 15px;
  height:25px;
  width: 60%;
}
 .links{

  margin-right: 0px;
  margin: 0;
  font-size: 15px;
  height:25px;
  width: 49.4%;
}
.rechts{

  margin-left: 0px;
  margin: 0;
  font-size: 15px;
  height:25px;
  width: 9.4%;
}

.logintext{
  font-size: 15px;

}
.Kundewahl{
  max-width: 350px;
}

.loginbtn{
  width: 150px ;
  height:25px  ;
  border-radius: 5px ;
  border: 0.5px solid  rgb(51, 113, 247);
  font-size: 16px;
}
.START{
  height: 13vw;
  max-height: 40px;
  width: 85%;
  border-radius: 13vw;
  background-color: rgb(84, 179, 20); /* Green */
  border: 2px solid #0000;
  border-color: white;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}
.START:hover {
  background:rgb(162, 248, 105);
	background-color:rgb(162, 248, 105);
 }
 .ENDE{
   height: 13vw;
   max-height: 40px;
   width: 85%;
   border-radius: 13vw;
   background-color: #ff4204; /* RED */
   border: 2px solid #0000;
   border-color: white;
   color: white;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 20px;
 }
 .ENDE:hover {
   background:	#fd6836;
 	background-color:	#fd6836;
  }
  .an1 {
    height: 13vw;
    max-height: 40px;
     width: 40%;
    border-radius: 13vw;
    background-color: rgb(84, 179, 20); /* Green */
    border: 2px solid #0000;
    border-color: white;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
  }
  .an1:hover {
    background:rgb(162, 248, 105);
  	background-color:rgb(162, 248, 105);
   }
.an {
  height: 13vw;
  max-height: 40px;
   width: 40%;
  border-radius: 13vw;
  background-color: rgb(84, 179, 20); /* Green */
  border: 2px solid #0000;
  border-color: white;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}
.an:hover {
  background:rgb(162, 248, 105);
	background-color:rgb(162, 248, 105);
 }
.savedsuccess{
padding: 5px;
}
.signuperror{
padding: 5px;
}

.ab {
  height: 13vw;
  max-height: 40px;
   width: 40%;
  border-radius: 13vw;
  background-color: #ff4204; /* RED */
  border: 2px solid #0000;
  border-color: white;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}
.ab:hover {
  background:	#fd6836;
	background-color:	#fd6836;
 }
 .ab1{
   height: 13vw;
   max-height: 40px;
   width: 85%;
   border-radius: 13vw;
   background-color: #ff4204; /* RED */
   border: 2px solid #0000;
   border-color: white;
   color: white;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 20px;
 }
 .ab1:hover {
   background:	#fd6836;
 	background-color:	#fd6836;
  }
#Tabellediv{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /*overflow-x:hidden;*/
  margin-bottom: 20vw;
  padding-top:  5px;
  padding-bottom:  30px;
}
#Tabellediv12{
  margin: auto;
  overflow-x:scroll;
  padding-top:  5px;
  padding-bottom:  5px;
  max-width: 80vw;
}
#Stundenübersicht{
  margin: auto;
  overflow-x:scroll;
  padding-top:  5px;
  padding-bottom:  5px;
  max-width: 80vw;
}
.bild {
  margin-bottom: 20px;
  margin: 0px;
  margin-top: 0px;
    max-width: 60%;
    height: auto;
}
#Tabelle1div{
  overflow-x: auto;
  margin-bottom: 0px;
}
#Tabelle2div{
  overflow-x: auto;
    margin-bottom: 0;
    padding-bottom: 0;
}
table, th, tr, td{
  margin: auto;
table-layout: fixed;
  border: 1px solid black;
  border-collapse: collapse;
}
th {
    padding: 5px;
    font-size: 13px;
    font-weight: 300;
    background-color:  rgb(51, 113, 247);
      color: white;
}
tr{
  height: 20;
}
td {
  width:300;
  padding: 5px;
  font-weight: normal;
  font-size: 13px;
}

td:nth-child(even) {
  background-color: #f2f2f2;
}
td:nth-child(uneven) {
  background-color: #f2f2f2;
}
#Krank{margin-bottom: 20px}
#Urlaub{margin-bottom: 20px}

dialog:not([open]) {

  display: none;
}

#dialog{
  margin-left: auto;
  margin-right: auto;
  margin-top: 20vw;
}
/*select {
  /* irrelevante Eigenschaften gekürzt 
  border: 1px solid black;
  padding:.75em 1em .5em 1em;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,1);
  background-color:rgb(0, 177, 231);
  color:white;
}

option {
  background:#ADD8E6;
  border-top:1px solid #066c8f;
  padding:.3em 1em .3em 1em;
}*/

select {
  text-align: center;
	display: block;
	font-size: 10px;
	font-family: sans-serif;
	font-weight: 300;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 80%;
	max-width: 80%;
  box-sizing: border-box;
  margin-top: 2px;
  margin-left: auto;
  margin-right: auto;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
select::-ms-expand {
	display: none;
}
select:hover {
	border-color: #888;
}
select:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 1px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 1px -moz-mac-focusring;
	color: #222;
	outline: none;
}
select option {
	font-weight:normal;
}

#KS, #KE, #US, #UE{
  font-size: 15px;
	font-family: 'Roboto', sans-serif;
	font-weight: 13px;
	color: #444;
	line-height: 1.3;
  width: 30vw;
  height: 30px;
	/*padding: .6em 1.4em .5em .8em;
	width: 80%;
	max-width: 80%;
  /*box-sizing: border-box;*/

  margin-top: 2px;
  margin-left: auto;
  margin-right: auto;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;

}

.Schule{
  width: 100vw;
}
.Schulstunden{
  
  height: 35px;
  width: 37vw;

  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
  /*align-content: center; 
  padding-left: 15%;*/
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  padding-top: 2%;
 
  background: #eee;
  box-sizing: border-box;
  width: 100vw;
}
#SchulButton{
  width: 100vw;
}

#urlaubschart{
  padding-left: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  /*width: 80%;
  height: 50px;*/

  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 2vw;
  width: 100vw; 
  height: 200px;
}
#krankchart{
  padding-left: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  margin-top: -30px;
  padding-left: 10%;
  padding-right: 10%;
  margin-bottom: 20px;
  padding-bottom: 2vw;
  width: 100vw; 
  height: 200px;
}
#ueberstundenchart{
  background-color: rgba(49, 50, 94, 0.486);
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 2vw;
  width: 80vw; 
  max-width: 480px;
  height: 60px;
  border-radius: .5rem;
}

details {
  padding: 5px;
  background-color: #e0fd39;
  border-radius: .5rem;
  margin-bottom: 5px;
}

summary::-webkit-details-marker {
  color: #fff;
  background-color: #000;
}
summary:before {
  width: 100vw;
  color: #000000;
  margin-right: 5px;
}

.Download{
  width:80vW;
  height:50px;
  margin:20px;
}

#InputYearSDZ{
  width: 80vw;
  height: 40 px;
  
  font-size: 14px;
}